<template>
  <Page :withAppBar="true">
    <!-- 1、头部 -->
    <AppBar class="app-bar" v-if="globalConfig.inApp">
      <!-- 左侧返回箭头 -->
      <img
        slot="left"
        class="icon-back"
        src="../../assets/images/icon_arrow_back.png"
        @click="back()"
      />
      <section style="color:white; font-size: 22px" slot="center">{{ pageTitle }}</section>
    </AppBar>

    <!-- 2、内容 -->
    <appContent>
      <!-- 无内容 -->
      <p class="empty-tip" v-if="todoLists.length === 0">暂无内容...</p>
      <!-- 展示的添加项 -->
      <itemTodo 
        v-for="item of todoLists"
        :key = item.id
        :itemObj = item
        @deleteTo="deleteTo" 
        @modifyTo="modifyTo"
        @changeTodo="changeTodo"
      >
      </itemTodo>


      <!-- 添加控件 -->
      <img class="icon-img" :src="iconImg" alt="" @click="addTodo">

      <!-- 底部栏 -->
      <bottomGroups
        :completeAmount="completeAmount"
        :incompleteAmount="incompleteAmount"
        @category="category"
      >
      </bottomGroups>
    </appContent>
  </Page>
</template>

<script>
import itemTodo from '@/todo/components/itemTodo.vue'
import bottomGroups from '@/todo/components/bottomGroups.vue'
import { mapState } from "vuex";
import axios from 'axios'
export default {
  name: 'todo',
  components: {
    itemTodo,
    bottomGroups
  },
  data() {
    return {
      pageTitle: 'for you',
      iconImg: require('../../assets/images/add-icon.png'),
    }
  },
  computed:{
    // 获取vuex中的数据
    ...mapState({
      totalList: state => state.todo.totalList, // todo列表数据
      todoLists: state => state.todo.todoLists,
    }),

    completeAmount(){
      if(this.totalList.length > 0){
        let temlist = []
        temlist = this.totalList.filter(val=>!val.complete)
        return temlist.length + ''
      } else {
        return '0'
      }
    },

    incompleteAmount(){
      if(this.totalList.length > 0){
        let temlist = []
        temlist = this.totalList.filter(val=>val.complete)
        return temlist.length + ''
      } else {
        return '0'
      }
    },
  },

  created() {
    // 打印后端的数据
    if(this.totalList.length ===0){
      utils.http.get('/totaltodo.list').then(res => {
        console.log('datahub返回的数据', res)
        this.$store.commit("todo/setState", {
          attr: "totalList",
          data: res
        });
        // 默认显示未完成
        console.log('totalList', this.totalList)
        this.$store.commit("todo/setState", {
            attr: "todoLists",
            data: res.filter(val=>!val.complete)
        });
      });
    }else{
      this.$store.commit("todo/setState", {
          attr: "todoLists",
          data: this.totalList.filter(val=>!val.complete)
      })
    }
  },

  methods: {
    category(val){
      // 完成
      if(val === 1){
        // utils.http.get('/incomplete.list').then(res => {
        //   console.log('datahub返回的数据', res)
        //     this.$store.commit("todo/setState", {
        //       attr: "todoLists",
        //       data: res
        //     });
        // });
        this.$store.commit("todo/setState", {
          attr: "todoLists",
          data: this.totalList.filter(val=>!val.complete)
        });
      }else{
        // 未完成
        // utils.http.get('/complete.list').then(res => {
        //   console.log('datahub返回的数据', res)
        //     this.$store.commit("todo/setState", {
        //       attr: "todoLists",
        //       data: res
        //     });
        // });
        this.$store.commit("todo/setState", {
          attr: "todoLists",
          data: this.totalList.filter(val=>val.complete)
        });
      }
    },
    addTodo(){
      this.go('addContent')
    },
    // 删除按钮事件
    deleteTo(item){
      console.log(item)
      this.totalList.splice(this.totalList.findIndex(val => val.id === item), 1)
      this.$store.commit("todo/setState", {
        attr: "totalList",
        data: this.totalList
      });

      this.todoLists.splice(this.todoLists.findIndex(val => val.id === item), 1)
      this.$store.commit("todo/setState", {
        attr: "todoLists",
        data: this.todoLists
      });

    },
    // 修改按钮事件
    modifyTo(item){
      console.log('要修改的项目', item)
      this.goWithQuery("addContent", {
        todoId: item
      });
    },
    // 修改状态
    changeTodo(){
      this.$store.commit("todo/setState", {
        attr: "todoLists",
        data: this.todoLists
      });
    }
  },
}
</script>

<style lang="scss" scoped>
.icon-back{
  width: 20px;
}
.empty-tip{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  transform: translateX(-50%);
  font-size: 22px;
  color: #fff;
}
.icon-img {
  position:fixed;
  right: 20px;
  bottom: 60px;
  width: 60px;
}

</style>